<template>
    <view class="category-detail-container">
        <!-- 顶部导航栏 -->
        <nav-bar title="故事分类·爱与关系" :showBack="true"></nav-bar>

        <!-- <view class="nav-bar">
            <view class="back-button" @click="navigateBack">
                <text class="back-icon">←</text>
            </view>
            <text class="page-title"></text>
        </view> -->

        <!-- 主要内容区 -->
        <scroll-view scroll-y class="main-content">
            <!-- 分类介绍 -->
            <view class="category-intro">
                <view class="category-header">
                    <view class="category-icon">❤️</view>
                    <view class="category-info">
                        <text class="category-title">爱与关系</text>
                        <!-- <text class="category-count">42个故事</text> -->
                    </view>
                </view>
                <view class="category-description">
                    <text>关于生命中重要的人际关系、情感纽带和归属感的故事</text>
                </view>
                <view class="category-tags">
                    <text class="category-tag">家庭</text>
                    <text class="category-tag">友谊</text>
                    <text class="category-tag">情感</text>
                </view>
            </view>

            <!-- 筛选标签 -->
            <!-- <scroll-view scroll-x class="filter-tags-scroll" show-scrollbar="false">
                <view class="filter-tags">
                    <view class="filter-tag-item active">
                        <text>全部</text>
                    </view>
                    <view class="filter-tag-item">
                        <text>家庭</text>
                    </view>
                    <view class="filter-tag-item">
                        <text>友谊</text>
                    </view>
                    <view class="filter-tag-item">
                        <text>情感</text>
                    </view>
                    <view class="filter-tag-item">
                        <text>亲子</text>
                    </view>
                    <view class="filter-tag-item">
                        <text>婚姻</text>
                    </view>
                </view>
            </scroll-view> -->

            <!-- 故事列表 -->
            <view class="stories-list">
                <!-- 故事项 1 -->
                <view class="story-item" @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=1')">
                    <view class="story-cover">
                        <text class="story-tag">家庭</text>
                    </view>
                    <view class="story-content">
                        <text class="story-title">母亲的手</text>
                        <text class="story-excerpt">那双布满皱纹的手，承载了我一生的爱与温暖...</text>
                        <view class="story-meta">
                            <text class="story-author">李奶奶</text>
                            <view class="story-stats">
                                <text class="story-views">1.5k阅读</text>
                                <text class="story-likes">120喜欢</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 故事项 2 -->
                <view class="story-item" @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=2')">
                    <view class="story-cover">
                        <text class="story-tag">友谊</text>
                    </view>
                    <view class="story-content">
                        <text class="story-title">五十年的友谊</text>
                        <text class="story-excerpt">从小学到老年，我们的友谊跨越了半个世纪...</text>
                        <view class="story-meta">
                            <text class="story-author">王爷爷</text>
                            <view class="story-stats">
                                <text class="story-views">980阅读</text>
                                <text class="story-likes">86喜欢</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 故事项 3 -->
                <view class="story-item" @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=3')">
                    <view class="story-cover">
                        <text class="story-tag">婚姻</text>
                    </view>
                    <view class="story-content">
                        <text class="story-title">相濡以沫</text>
                        <text class="story-excerpt">六十年的婚姻生活，我们一起经历了人生的酸甜苦辣...</text>
                        <view class="story-meta">
                            <text class="story-author">张爷爷</text>
                            <view class="story-stats">
                                <text class="story-views">1.2k阅读</text>
                                <text class="story-likes">105喜欢</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 故事项 4 -->
                <view class="story-item" @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=4')">
                    <view class="story-cover">
                        <text class="story-tag">亲子</text>
                    </view>
                    <view class="story-content">
                        <text class="story-title">儿子的成长</text>
                        <text class="story-excerpt">看着他从牙牙学语到成家立业，作为父亲的骄傲...</text>
                        <view class="story-meta">
                            <text class="story-author">陈叔叔</text>
                            <view class="story-stats">
                                <text class="story-views">850阅读</text>
                                <text class="story-likes">78喜欢</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 故事项 5 -->
                <view class="story-item" @click="navigateTo('/pages/storylibrary/storyCollection/storyDetail?id=5')">
                    <view class="story-cover">
                        <text class="story-tag">情感纽带</text>
                    </view>
                    <view class="story-content">
                        <text class="story-title">邻里情深</text>
                        <text class="story-excerpt">在同一个小区生活了三十年，我们已经成为了家人...</text>
                        <view class="story-meta">
                            <text class="story-author">赵阿姨</text>
                            <view class="story-stats">
                                <text class="story-views">760阅读</text>
                                <text class="story-likes">65喜欢</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue'

export default {
    components: {
        NavBar
    },
    data() {
        return {

        }
    },
    methods: {
        navigateTo(url) {
            uni.navigateTo({
                url: url
            });
        },
        navigateBack() {
            uni.navigateBack();
        }
    }
}
</script>

<style>
@import './index.css';

.category-detail-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f8f8f8;
}

/* 导航栏样式 */
.nav-bar {
    padding: 20rpx 30rpx;
    background-color: #359e76;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.back-button {
    display: flex;
    align-items: center;
}

.back-icon {
    font-size: 36rpx;
    margin-right: 10rpx;
}

.back-text {
    font-size: 28rpx;
    margin-right: 20rpx;
}

.page-title {
    font-size: 34rpx;
    font-weight: bold;
}

/* 主内容区样式 */
/* .main-content {
    flex: 1;
    width: calc(100% - 40rpx);
    padding: 20rpx;
} */

/* 分类介绍样式 */
.category-intro {
    background-color: #fff;
    border-radius: 15rpx;
    padding: 25rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.category-header {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
}

.category-icon {
    font-size: 70rpx;
    margin-right: 20rpx;
}

.category-info {
    flex: 1;
}

.category-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 5rpx;
}

.category-count {
    font-size: 24rpx;
    color: #999;
}

.category-description {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
    line-height: 1.5;
}

.category-tags {
    display: flex;
    flex-wrap: wrap;
}

.category-tag {
    font-size: 22rpx;
    color: #359e76;
    background-color: rgba(82, 196, 26, 0.1);
    padding: 6rpx 15rpx;
    border-radius: 20rpx;
    margin-right: 15rpx;
    margin-bottom: 10rpx;
}

/* 筛选标签样式 */
.filter-tags-scroll {
    width: 100%;
    white-space: nowrap;
    margin-bottom: 20rpx;
}

.filter-tags {
    display: inline-flex;
    padding: 10rpx 0;
}

.filter-tag-item {
    display: inline-block;
    padding: 10rpx 25rpx;
    margin-right: 15rpx;
    background-color: #f0f0f0;
    border-radius: 30rpx;
    font-size: 26rpx;
    color: #666;
    transition: all 0.3s;
}

.filter-tag-item.active {
    background-color: #359e76;
    color: #fff;
}

/* 故事列表样式 */
.stories-list {
    display: flex;
    flex-direction: column;
}

.story-item {
    display: flex;
    background-color: #fff;
    border-radius: 15rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.story-cover {
    width: 180rpx;
    height: 180rpx;
    border-radius: 10rpx;
    background-color: #eee;
    margin-right: 20rpx;
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.story-tag {
    position: absolute;
    top: 10rpx;
    left: 10rpx;
    font-size: 20rpx;
    color: #fff;
    background-color: #359e76aa;
    padding: 4rpx 12rpx;
    border-radius: 10rpx;
}

.story-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.story-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
}

.story-excerpt {
    font-size: 26rpx;
    color: #666;
    line-height: 1.5;
    margin-bottom: 15rpx;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.story-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.story-author {
    font-size: 24rpx;
    color: #999;
}

.story-stats {
    display: flex;
}

.story-views,
.story-likes {
    font-size: 22rpx;
    color: #999;
    margin-left: 15rpx;
}
</style>